<template>
  <div>
    <el-dropdown v-if="selectList.length">
      <el-button class="btn" icon="el-icon-check" :size="size">
        选中{{ selectList.length }}项
      </el-button>
      <template #dropdown>
        <el-dropdown-menu @click="bulkRejection">
          <el-dropdown-item>{{ bulkRejectionText }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button
      class="btn"
      type="success"
      icon="Search"
      :size="size"
      @click="showDialogWithData"
    >
      {{ filterButtonText }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  selectList: {
    type: Array,
    required: true
  },
  size: {
    type: String,
    default: 'medium'
  },
  bulkRejectionText: {
    type: String,
    default: '批量删除'
  },
  filterButtonText: {
    type: String,
    default: '筛选'
  }
});

const emits = defineEmits(['bulk-rejection', 'show-dialog']);

const bulkRejection = () => {
  emits('bulk-rejection');
};

const showDialogWithData = () => {
  emits('show-dialog');
};
</script>

<style scoped>
.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
    0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}
</style>
